<template>
	<div class="tab1">
		<div class="product-layer">
			<div class="product-box">
				<ul class = "product-first">
					<li v-for = "(it, index) in choosedProductItem.subList" :key = "index" >
						{{it.name}}
					</li>
				</ul>	
			</div>
			<footer>
				<div>清空</div>
				<div @click ='ok'>确定</div>
			</footer>
		</div>
		
	</div>
</template>

<script>
export default {
	props: ['choosedProductItem', 'dementionFlag'],
	methods: {
		ok() {
			this.dementionFlag.showFlag = false
		},
	},
}
</script>

<style scoped>
.tab1 {
	height: 100px;
	background: pink;
}
.product-layer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10;
}
.product-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 86.7%;
	background: #f5f5f5;
	height: 100%;
}
.product-first {
	position: relative;
}
footer {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 40px;
	width: 86.7%;
	/* line-height: 40px; */
	display: flex;
	/* justify-content: center; */
	flex-direction: row;
}
footer > div {
	flex: 1;
	min-width: 33.3%;
	line-height: 40px;
	border-top: 1px solid #dcdcdc;
}
</style>